<template>
        <div class="cmt-container">
           <h3>发表评论</h3>
           <hr>
           <textarea name="comment" id="comment" maxlength="120" placeholder="请发表评论（120字以内" v-model="commentContent"></textarea>
           <mt-button type="primary" size="large" @click="postComments">发表评论</mt-button>
           <div class="cmt-list"> 
               <div class="cmt-item" v-for="(item,i) in commentList" :key="item.id">
                    <div class="cmt-title">第{{i+1}}楼&nbsp&nbsp用户:{{item.user_name}}&nbsp&nbsp发表时间：{{item.add_time|dateFormatter}}</div>
                    <div class="cmt-content"> {{ (item.content === 'undefined'||item.content.trim() === '')? '此用户很懒，嘛都没说': item.content }}</div>
               </div>
           </div>
           <mt-button type="primary" size="large" plain @click="getMore">加载更多</mt-button>
       </div> 
</template>
<script>
import { Toast } from 'mint-ui'
export default {
    data(){
        return{
            pageindex:1,
            commentContent:'',
            commentList:[]
        }
    },
    methods:{
        getComments(){
            this.$http.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(result=>{
                var res=result.body;
                if(res.status===0){
                    this.commentList=this.commentList.concat(res.message);
                }else{
                    Toast({
                        message:"获取评论失败",
                        position:'center',
                        duration:2000,
                    })
                }
            })
        },
        postComments(){
          console.log(this.commentContent);
          this.$http.post('api/postcomment/'+this.id,{content:this.commentContent},{emulateJSON:true}).then(result=>{
            var res = result.body;
            if(res.status===0){
              var cmtobj ={
                user_name:'匿名用户',
                add_time:new Date(),
                content:this.commentContent
              }
              this.commentList.unshift(cmtobj)
              this.commentContent=''
            }
          })
        },
        getMore(){
            this.pageindex++;
            this.getComments();
        }
    },
    created() {
        this.getComments();
    },
    props:['id']
}
</script>
<style lang="scss" scoped>
.cmt-container{
    h3{
        font-size: 16px;
    }
    textarea{
        margin:3px auto;
        font-size: 14px;
    }
    .cmt-list{
        font-size: 14px;
        margin: 3px 1px;
        .cmt-title{
            background-color: #ccc;
            line-height: 30px;
        }
        .cmt-content{
            text-indent: 2em;
            line-height: 35px;
        }
    }
}
</style>